<template>
  <el-card>
    <template slot="header">
      <span>线上热门搜索</span>
    </template>
    <el-row :gutter="10">
      <!-- 搜索用户数 -->
      <el-col :span="12">
        <div>
          <div>
            <span>搜索用户数</span
            ><i style="margin-left: 10px" class="el-icon-info"></i>
          </div>
          <div style="margin-top: 10px">
            <span
              style="font-size: larger; font-weight: bold; margin-right: 30px"
              >34290</span
            >
            <span
              >17.3 &nbsp;<svg
                t="1667740731326"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1862"
                width="16"
                height="16"
              >
                <path
                  d="M554.403 285.884l384.93 393.728c23.166 23.694 22.737 61.682-0.958 84.847a60 60 0 0 1-41.945 17.097H126.57c-33.138 0-60-26.863-60-60a60 60 0 0 1 17.096-41.944l384.931-393.728c23.165-23.695 61.153-24.124 84.847-0.96 0.324 0.317 0.643 0.636 0.959 0.96z"
                  fill="#d81e06"
                  p-id="1863"
                ></path></svg
            ></span>
          </div>
          <div ref="searchChart" style="height: 10vh">
            <!-- 图表 -->
          </div>
        </div>
      </el-col>
      <!-- 人均搜索次数 -->
      <el-col :span="12">
        <div>
          <div>
            <span>人均搜索次数</span
            ><i style="margin-left: 10px" class="el-icon-info"></i>
          </div>
          <div style="margin-top: 10px">
            <span
              style="font-size: larger; font-weight: bold; margin-right: 30px"
              >3.6</span
            >
            <span
              >35.3 &nbsp;<svg
                t="1667715097206"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1568"
                width="16"
                height="16"
              >
                <path
                  d="M554.403 737.672l384.93-393.728c23.166-23.694 22.737-61.682-0.958-84.847A60 60 0 0 0 896.43 242H126.57c-33.138 0-60 26.863-60 60a60 60 0 0 0 17.096 41.944l384.931 393.728c23.165 23.695 61.153 24.124 84.847 0.96 0.324-0.317 0.643-0.636 0.959-0.96z"
                  fill="#1afa29"
                  p-id="1569"
                ></path></svg
            ></span>
          </div>
          <div ref="averageChart" style="height: 10vh">
            <!-- 图表 -->
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-table border style="margin-top: 10px">
      <el-table-column
        label="排名"
        align="center"
        type="index"
        width="80
        "
      ></el-table-column>
      <el-table-column label="搜索关键字"></el-table-column>
      <el-table-column label="用户数"></el-table-column>
      <el-table-column label="周涨幅"></el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      style="text-align: center"
      :current-page="1"
      :total="100"
      :page-size="10"
    ></el-pagination>
  </el-card>
</template>

<script>
// 引入echarts
import * as echarts from 'echarts'
export default {
  data() {
    return {
      myEcharts: null,
      myAverageEchart: null,
      source: [
        { number: 10, time: 1 },
        { number: 30, time: 2 },
        { number: 40, time: 3 },
        { number: 5, time: 4 },
        { number: 20, time: 5 },
        { number: 40, time: 6 },
        { number: 7, time: 7 },
        { number: 60, time: 8 }
      ]
    }
  },
  methods: {
    // 绘制图像
    drawSearchImg() {
      this.myEcharts.setOption({
        grid: { top: 0, left: 0, right: 0, bottom: 0 },
        dataset: { source: this.source },
        xAxis: { show: false },
        yAxis: { show: false },
        series: [
          {
            name: '',
            type: 'line',
            encode: {
              x: 'time',
              y: 'number'
            },
            itemStyle: {
              opacity: 0
            },
            lineStyle: {
              color: 'purple'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'purple' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#fff' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        ]
      })
    },
    drawAverageImg() {
      this.myAverageEchart.setOption({
        grid: { top: 0, left: 0, right: 0, bottom: 0 },
        dataset: { source: this.source },
        xAxis: { show: false },
        yAxis: { show: false },
        series: [
          {
            name: '',
            type: 'line',
            encode: {
              x: 'time',
              y: 'number'
            },
            itemStyle: {
              opacity: 0
            },
            lineStyle: {
              color: 'purple'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'purple' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#fff' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        ]
      })
    }
  },
  mounted() {
    // 初始化echarts 实例
    this.myEcharts = echarts.init(this.$refs.searchChart)
    this.drawSearchImg()
    this.myAverageEchart = echarts.init(this.$refs.averageChart)
    this.drawAverageImg()
  }
}
</script>

<style></style>
